<template>
  <div>
    <div class="text-h4 tw-mb-4 tw-m-5" style="padding-left: 3px;border-left: 5px solid #3370FF;">
      个人信息修改
    </div>
    <div class="tw-m-5 tw-border tw-shadow tw-rounded-2xl" flat>
      <q-form class="tw-p-10 tw-space-y-10" @submit="submitForm()" @reset="resetForm()">
        <div class="text-h6" style="padding-left: 3px;border-left: 5px solid #3370FF;">
          信息修改
        </div>
        <div class="tw-grid-cols-3 tw-grid tw-gap-10">
          <div>
            <q-input
              v-model="form.major"
              label="专业"
              type="text"
              outlined
              dense
              disable
            >
              <template v-slot:prepend>
                <q-icon name="work" class="tw-text-2xl"/>
              </template>
            </q-input>
          </div>
          <div>
            <q-input
              v-model="form.classnum"
              label="班级"
              type="text"
              outlined
              dense
              disable
            >
              <template v-slot:prepend>
                <q-icon name="class" class="tw-text-2xl"/>
              </template>
            </q-input>
          </div>
          <div>
            <q-input
              v-model="form.snum"
              label="学号"
              type="text"
              dense
              outlined
              disable
            >
              <template v-slot:prepend>
                <q-icon name="person" class="tw-text-2xl"/>
              </template>
            </q-input>
          </div>
        </div>
        <div class="tw-grid tw-grid-cols-3 tw-gap-10">
          <q-input
            v-model="form.sname"
            label="用户名"
            type="text"
            dense
            outlined
            :rules="[val => !!val || '用户名不能为空']"
          >
            <template v-slot:prepend>
              <q-icon name="perm_identity" class="tw-text-2xl"/>
            </template>
          </q-input>
          <q-input
            v-model="form.qq"
            label="QQ"
            type="text"
            dense
            outlined
          >
            <template v-slot:prepend>
              <q-icon name="bookmark_border" class="tw-text-2xl"/>
            </template>
          </q-input>
          <q-input
            v-model="form.tel"
            label="电话"
            type="tel"
            dense
            outlined
          >
            <template v-slot:prepend>
              <q-icon name="phone" class="tw-text-2xl"/>
            </template>
          </q-input>

        </div>
        <q-input
          class="tw-mt-3"
          v-model="form.email"
          label="电子邮件"
          type="email"
          dense
          outlined
        >
          <template v-slot:prepend>
            <q-icon name="email" class="tw-text-2xl"/>
          </template>
        </q-input>
        <div class="text-h6" style="padding-left: 3px;border-left: 5px solid #3370FF;">
          密码修改
        </div>
        <q-input
          class="tw-mt-3"
          outlined
          v-model="form.password"
          label="密码"
          type="password"
          dense
          :rules="[val => !!val || '密码不能为空', val => val.length >= 6 || '密码长度不能少于6位']"
        >
          <template v-slot:prepend>
            <q-icon name="password" class="tw-text-2xl"/>
          </template>
        </q-input>
        <q-input
          v-model="form.confirmPassword"
          label="确认密码"
          type="password"
          dense
          outlined
          :rules="[val => !!val || '确认密码不能为空', val => val === form.password || '两次密码输入不一致']"
        >
          <template v-slot:prepend>
            <q-icon name="password" class="tw-text-2xl"/>
          </template>
        </q-input>
        <q-btn type="submit" label="保存" color="primary" class="q-mt-md"/>
        <q-btn type="reset" label="重置" class="q-mt-md q-ml-sm"/>
      </q-form>
    </div>
  </div>
</template>


<script setup>
import {ref} from "vue";
import {api} from "boot/axios";
import {useQuasar} from "quasar";

let uinfo = JSON.parse(localStorage.getItem('info'))
let form = ref({
  sname: uinfo.sname,
  snum: uinfo.snum,
  age: uinfo.age,
  major: uinfo.major,
  qq: uinfo.qq,
  email: uinfo.email,
  tel: uinfo.tel,
  dept: uinfo.dept,
  classnum: uinfo.classnum,
  password: uinfo.password,
  confirmPassword: uinfo.password
})
const $q = useQuasar()
let submitForm = () => {
  let formdata = new FormData()
  formdata.append('snum', form.value.snum)
  formdata.append('tel', form.value.tel)
  formdata.append('qq', form.value.qq)
  formdata.append('confirmPassword', form.value.confirmPassword)
  formdata.append('email', form.value.email)

  api({
    url: '/job/student/update',
    method: 'post',
    data: formdata
  }).then(res => {
    if (res.data.code === 200) {
      $q.notify({
        message: '修改成功',
        color: 'positive',
        position: 'top',
        timeout: 1000
      })
      // 更新本地存储中键值存在的数据
      let uinfo = JSON.parse(localStorage.getItem('info'))
      for(let key in uinfo){
        if(form.value[key]){
          uinfo[key] = form.value[key]
        }
      }
      localStorage.setItem('info', JSON.stringify({...form.value,role:uinfo.role}))
      form.value = {
        sname: uinfo.sname,
        snum: uinfo.snum,
        age: uinfo.age,
        major: uinfo.major,
        qq: uinfo.qq,
        email: uinfo.email,
        tel: uinfo.tel,
        dept: uinfo.dept,
        classnum: uinfo.classnum,
        password: uinfo.password,
        confirmPassword: uinfo.password
      }
    } else {
      $q.notify({
        message: '修改失败',
        color: 'negative',
        position: 'top',
        timeout: 1000
      })
    }
  })
}

let resetForm = () => {
  form.value = {
    username: '',
    email: '',
    password: '',
    confirmPassword: ''
  }
}


</script>

<style scoped>

</style>
